<template>
  <div class="query-list">
    <el-row
      :gutter="5"
      style="display: flex; margin-bottom: 5px"
      v-for="(item, index) in queryList"
      :key="index"
    >
      <el-col :span="6">
        <el-input
          v-model="item.name"
          placeholder="名称"
          @input="changeValue"
        ></el-input>
      </el-col>
      <el-col :span="6" v-if="showRelation">
        <el-select
          v-model="item.relation"
          @change="changeValue"
          placeholder="关系"
        >
          <el-option
            v-for="item in relationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="item.type" @change="changeValue" placeholder="类型">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" class="align-center">

        <el-input
          v-model="item.defaultValue"
          style="margin-right: 10px;width: 200px"
          @input="changeValue"
          placeholder="默认值"
        ></el-input>


        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          circle
          @click="deleteRow(index)"
        ></el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 5px">
      <el-button
        type="success"
        icon="el-icon-plus"
        circle
        size="mini"
        @click="addRow"
      ></el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: () => [],
      type: Array
    },
    showRelation: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      option :{
        column: [
          {
            label: '创建',
            prop: 'select',
            type: 'select',
            allowCreate: true,
            filterable: true,
            dicData: [
              {
                label: '字典1',
                value: 0
              },
              {
                label: '字典2',
                value: 1
              }
            ]
          }
        ]
      },
      queryList: [],
      typeList: [
        { label: '小数数组', value: 'Array<double>' },
        { label: '整数数组', value: 'Array<bigint>' },
        { label: '字符串数组', value: 'Array<string>' },
        { label: '日期数组', value: 'Array<date>' },
        { label: '小数', value: 'double' },
        { label: '整数', value: 'bigint' },
        { label: '字符串', value: 'string' },
        { label: '日期格式', value: 'date' }
      ],
      relationList: [
        { label: '模糊', value: 'like' },
        { label: '等于', value: '=' },
        { label: '大于', value: '>' },
        { label: '大于等于', value: '>=' },
        { label: '小于', value: '<' },
        { label: '小于等于', value: '<=' },
        { label: '包含', value: 'in ' },
        { label: '范围', value: 'between' }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    deleteRow(index) {
      this.queryList.splice(index, 1);
      this.$emit('update:value', this.queryList);
      this.changeValue();
    },
    addRow() {
      this.queryList.push({});
      this.$emit('update:value', this.queryList);
    },
    changeValue() {
      this.$emit('change');
    },
    getParams(){
      return this.queryList;
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.queryList = val;
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.el-select {
  width: 100%;
}
.query-list{
  width: 100%;
}
.align-center {
  display: flex;
  align-items: center;
}
</style>
